<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../引入vue2.js"></script>
    <!-- <script src="./vue-router.js"></script> -->
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .title {
        height: 60px;
        background-color: yellow;
        text-align: center;
        line-height: 60px;
      }
      .friend-header {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        font-size: 20px;
        font-weight: bold;
        outline: none;
        cursor: pointer;
      }
      .user-list {
        overflow: hidden;
      }
      .user-list > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        border-bottom: 1px solid blue;
        height: 100px;
      }
      .user-list > div:last-child {
        border-bottom: none;
      }
      .toggle-enter,
      .toggle-leave-to {
        /* 计算属性 groupHeightSytle 在设置标签高度，这两个类名也在设置标签高度，而计算属性设置的样式属于行内样式，相当于js在设置。 */
        height: 0 !important;
      }
      .toggle-enter-active,
      .toggle-leave-active {
        transition: all 0.5s;
      }
      .header-arrow {
        display: inline-block;
        transition: all 0.5s;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1 class="title">好友列表</h1>
      <friend-group
        v-for="group,i in friends "
        :key="group.id"
        :group="group"
      ></friend-group>
    </div>
    <template id="tem">
      <div class="friend-root">
        <!-- 可点击的头部部分 -->
        <button class="friend-header" @click="show=!show">
          <div class="header-left">
            <span class="header-arrow" :style="arrowStyle">&gt;</span>
            <span>{{group.name}}</span>
          </div>
          <div class="herader-right">
            {{group.list.filter(friend=>friend.online==true).length}}/{{group.list.length}}
          </div>
        </button>
        <!-- 好友列表部分 -->
        <transition name="toggle">
          <div class="user-list" v-show="show" :style="groupHeightStyle">
            <div
              class="friend"
              v-for="friend,i in group.list "
              :key="friend.id"
              :style="{'background-color':friend.online?'red':'linghtblue', 'clolr':friend.online?'white':'gray'}"
            >
              <div>
                <h3>{{friend.name}}</h3>
                <p>{{friend.sign}}</p>
              </div>
              <div>{{friend.online?"在线":"离线"}}</div>
            </div>
          </div>
        </transition>
      </div>
    </template>
    <script>
      let friendGroup = {
        template: "#tem",
        data() {
          return {
            show: false,
          };
        },
        props: ["group"],
        computed: {
          groupHeightStyle() {
            return {
              height: this.group.list.length * 100 + "px",
            };
          },
          arrowStyle() {
            return {
              transform: this.show ? "rotate(90deg)" : "rotate(0deg)",
            };
          },
        },
        mounted() {
          // 当前组件被渲染完毕时,要对数据进行排序
          // sort() 函数 泛会所1 ，链各个数据需要换位置,返回值是-1,不需要更换位置,两个数据相等,返回0，也是不交换位置
          this.group.list.sort((a, b) => {
            if (a.online && !b.online) {
              return -1;
            } else if (!a.online && b.online) {
              return 1;
            } else {
              return 0;
            }
          });
        },
      };
      let vw = new Vue({
        el: "#app",
        data: {
          friends: [
            {
              id: 1,
              name: "同学",
              list: [
                { id: 101, name: "小明", sign: "真难", online: false },
                { id: 102, name: "小李", sign: "毫无头绪", online: true },
                { id: 103, name: "小红", sign: "网上抄的", online: false },
              ],
            },
            {
              id: 2,
              name: "朋友",
              list: [
                { id: 201, name: "张三", sign: "别问", online: false },
                { id: 202, name: "李六", sign: "问就是不会", online: true },
                { id: 203, name: "李四", sign: "再问留级", online: false },
                { id: 204, name: "王五", sign: "不会~~~", online: true },
              ],
            },
            {
              id: 3,
              name: "家人",
              list: [
                { id: 301, name: "张三1", sign: "不会~~~", online: false },
                { id: 302, name: "李六1", sign: "不会~~~", online: true },
                { id: 303, name: "李四1", sign: "不会~~~", online: false },
                { id: 304, name: "王五1", sign: "不会~~~", online: true },
                { id: 305, name: "王五1", sign: "不会~~~", online: true },
              ],
            },
          ],
        },
        components: {
          friendGroup,
        },
      });
    </script>
  </body>
</html>